<template>
<div class="data-preview">
    <div class="some-data-count">
        <span>
        <span class="s-d-c-item">
          <span class="desc-tip">列数：</span>
        {{previewData.cols}}
        </span>
        <span v-show="previewData.fileSize" class="s-d-c-item">
          <span class="desc-tip">大小：</span>
        {{previewData.fileSize}}
        </span>
        </span>
        <span>只显示前 {{previewData.records.length}} 条数据</span>
    </div>
    <el-table tooltip-effect="dark" :data="previewData.records" class="data-preview-table">
        <el-table-column v-for="(item, i) in previewData.schema" :key="i" :label="item.name" :prop="`${i}`" :show-overflow-tooltip="true">
            <template slot="header">
                <template v-if="item.name.length > 7">
                    <el-tooltip effect="dark" :content="item.name" placement="top-start">
                        <span class="tips-span-box">{{item.name}}</span>
                    </el-tooltip>
                </template>
                <template v-else>{{item.name}}</template>
            </template>
        </el-table-column>
    </el-table>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    name: 'DataPreview',
    props: {
        form: {
            type: Object
        }
    },
    computed: {
        ...mapGetters({
            previewData: 'common/getPreviewData'
        })
    }
}
</script>
<style lang="less">
    .data-preview-table {
        max-height: calc(100% - 35px);
        overflow-y: auto;
    }
    .data-preview {
        height: calc(100% - 70px);
        .tips-span-box {
            width: 100%;
            vertical-align: middle;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
</style>
